<template>
  <div class="accessory-section">
    <h2>配件专区</h2>
    <div class="product" v-for="item in accessoryProducts" :key="item.id">
      <h3>{{ item.name }}</h3>
      <p>价格: ¥{{ item.price }}</p>
      <p>{{ item.description }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const accessoryProducts = [
  {
    id: 5,
    name: "无线蓝牙耳机",
    price: 599,
    description: "主动降噪，音质出色",
  },
  {
    id: 6,
    name: "快充充电器",
    price: 199,
    description: "65W 快充，多协议支持",
  },
];
</script>

<style scoped>
.accessory-section {
  padding: 1rem;
}
.product {
  border: 1px solid #eee;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 4px;
}
</style>
